<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>我的合同</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="js/rem.js"></script> 
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/page.css"/>
    <link rel="stylesheet" type="text/css" href="css/all.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loading.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
	<script type="text/javascript">
		$(window).load(function(){
			$(".loading").addClass("loader-chanage")
			$(".loading").fadeOut(300)
		})
	</script>
	<style type="text/css">
		#bg{width:100%;height:100%;background-color:#000; opacity:0.5; position:absolute;left:0;top:0;display:none}
		#dialog{width:86%; position:absolute;left:7%;top:100px;display: none;}
		#dialogs{width:76%;margin:0 auto;background-color: #fff;padding:2%;}
		#close{ position: absolute;right:12%;top:0}
		#dialog #left{position: absolute;left:0;top:150px;width:10%}
		#dialog #right{position: absolute;right:0;top:150px;width:10%}
	</style>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
	<body>
		<div id="bg"></div>
		<div id="dialog">
			<img src="img/left2.png" id="left" />
			<img src="img/right2.png" id="right" />
			<div id="dialogs">
				<img id="close" src="img/close_ch.png" width="10%"  />
				<img id="proImg" src="upload/ht.jpg" width="100%"  />
			</div>
		</div>
		<div class="headertwo clearfloat" id="header">
			<a href="javascript:history.go(-1)" class="fl box-s"><i class="iconfont icon-arrow-l fl"></i></a>
			<p class="fl">我的合同</p>
		</div>
		
		<div class="contract clearfloat" id="main">
			<ul>
				<li>
					<span></span>
					<img src="upload/ht1.jpg"/>
				</li>
				<li>
					<span></span>
					<img src="upload/ht2.jpg"/>
				</li>
				<li>
					<span></span>
					<img src="upload/ht3.jpg"/>
				</li>
				<li>
					<span></span>
					<img src="upload/ht4.jpg"/>
				</li>
				<li>
					<span></span>
					<img src="upload/ht5.jpg"/>
				</li>
				<!--<li>
					<i class="iconfont icon-jia jia"></i>
					<p>上传新合同</p>
				</li>-->
			</ul>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
	<script src="js/fastclick.js"></script>
	<script src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/hmt.js" ></script>
	<script type="text/javascript">
		$(function(){
			$("#main li").click(function(){
				$("#bg").show();
				window.index = $(this).index();
				var imgName = $(this).find("img").attr("src");
                $("#dialog").show();
                $("#proImg").attr("src",imgName);
			});
			
			$("#left").click(function(){
				if(window.index==0){
					var imgName = $("#main li:last").find("img").attr("src");					
					window.index=$("#main li").length-1;
				}else{
					var imgName = $("#main li").eq(window.index-1).find("img").attr("src");	
					window.index--;
				}
				
				$("#proImg").attr("src",imgName);
				
			})
			$("#right").click(function(){
				$(this).attr("src","img/right2.png")
				if(window.index==$("#main li").length-1){
					var imgName = $("#main li:first").find("img").attr("src");					
					window.index=0;
				}else{
					var imgName = $("#main li").eq(window.index+1).find("img").attr("src");	
					window.index++;
				}
				
				$("#proImg").attr("src",imgName);
			})
			
			$("#close").click(function(){
				$(this).attr("src","img/close.png")
				$("#bg").slideUp("fast");
				$("#dialog").slideUp("fast");
			});
//			$("#bg").click(function(){
//				$("#bg").slideUp("fast");
//				$("#dialog").slideUp("fast");
//			});
		})
	</script>
</html>
